<template>
  <div id="userRegisterView">
    <a-form :model="form" @submit="handleSubmit">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item field="头像" label="头像" label-col-flex="100px">
            <a-input v-model="form.avatarUrl" placeholder="please enter..." />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="账号" label="账号" label-col-flex="80px">
            <a-input v-model="form.userAccount" placeholder="please enter..." />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="密码" label="密码" label-col-flex="80px">
            <a-input
              v-model="form.userPassword"
              placeholder="please enter..."
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item field="姓名" label="姓名" label-col-flex="100px">
            <a-input v-model="form.userName" placeholder="please enter..." />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="性别" label="性别" label-col-flex="80px">
            <a-select
              v-model="form.userSex"
              :style="{ width: '320px' }"
              placeholder="Please select ..."
              show-header-on-empty
            >
              <a-option value="1">女</a-option>
              <a-option value="0">男</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item field="电话" label="电话" label-col-flex="100px">
            <a-input v-model="form.userIphone" placeholder="please enter..." />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="角色" label="角色" label-col-flex="80px">
            <a-select
              v-model="form.userRole"
              :style="{ width: '320px' }"
              placeholder="Please select ..."
              show-header-on-empty
            >
              <a-option value="0">学生</a-option>
              <a-option value="1">员工</a-option>
              <a-option value="2">管理员</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped></style>

<script setup lang="ts">
import { reactive } from "vue";
import { UserControllerService, UserRegister } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();
const form = reactive({
  avatarUrl: "",
  userAccount: "",
  userIphone: undefined,
  userName: "",
  userPassword: "",
  userRole: undefined,
  userSex: undefined,
} as UserRegister);

const handleSubmit = async () => {
  const res = await UserControllerService.userRegisterUsingPost(form);
  if (res.code === 0) {
    message.success("注册成功，请登录");
    router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    message.error("注册失败" + res.message);
  }
};
</script>
